<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getMyOrderList } from '@/api/order'
const route = useRoute()
const active = ref(route.query.dataType || 'all')
const myOrderList = ref()
const getList = async() => {
  const { data } = await getMyOrderList(active.value)
  myOrderList.value = data
  console.log("用户订单",data);
  
} 
getList()

watch(active, (newVal) => {
  getList()
}, { immediate: true })
</script>

<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <van-tabs v-model:active="active" sticky>
        <van-tab name="all" title="全部"></van-tab>
        <van-tab name="payment" title="待支付"></van-tab>
        <van-tab name="delivery" title="待发货"></van-tab>
        <van-tab name="received" title="待收货"></van-tab>
        <van-tab name="completed" title="已完成"></van-tab>
    </van-tabs>


    <OrderListItem :myOrderList="myOrderList" @updateList="getList"></OrderListItem>
  </div>
</template>


<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}
</style>